{% extends "StartGroup/groupHome.html" %}
{% block portraitUpload %}{% endblock %}
{% block content %}
{% load tags %}
    
    <div class="nobreak membersPage">
        <div>
	    <div>Sort By:</div>
            <div id="sortByName" class="nobreak">Name</div>
            <div class="nobreak">
		
                <div class="sort">
		    <form method="POST" action="/connectpeople/{{ group.group_web_address }}/groupMembers/">
			<input type="hidden" name="sortBy" value="name"/>
			<input type="hidden" name="sortdir" value="asc"/>
			<input type="image" title="Name Ascending" src="/{{ media_url }}/images/sort_ascending.png" class="sortIcons"/>
		    </form>
		</div>
		
		<div class="sort">
		    <form method="POST" action="/connectpeople/{{ group.group_web_address }}/groupMembers/">
			<input type="hidden" name="sortBy" value="name"/>
			<input type="hidden" name="sortdir" value="desc"/>		    
			<input type="image" title="Name Descending" src="/{{ media_url }}/images/sort_descending.png" class="sortIcons"/>
		    </form>
		</div>
            </div>
            <div id="sortByJoin" class="nobreak">Join Date</div>
            <div class="nobreak">
                <div class="sort">
		    <form method="POST" action="/connectpeople/{{ group.group_web_address }}/groupMembers/">
			<input type="hidden" name="sortBy" value="join"/>
			<input type="hidden" name="sortdir" value="asc"/>
			<input type="image" title="Join Date Ascending" src="/{{ media_url }}/images/sort_ascending.png" class="sortIcons"/>
		    </form>
		</div>
		
                <div class="sort">
		    <form method="POST" action="/connectpeople/{{ group.group_web_address }}/groupMembers/">
			<input type="hidden" name="sortBy" value="join"/>
			<input type="hidden" name="sortdir" value="desc"/>		    
			<input type="image" title="Join Date Descending" src="/{{ media_url }}/images/sort_descending.png" class="sortIcons"/>
		    </form>
		</div>
            </div>
        </div>    
        <div id="members">
	    <div class='topPagination'>
		<div class='clearbreak noRightBreak'>
		{% if pages.has_previous %}
		    <a href='?page={{pages.previous_page_number}}'>previous</a>
		{% endif %}
		<span>Page {{pages.number}} of {{ pages.paginator.num_pages }}</span>
		{% if pages.has_next %}
		    <a href='?page={{ pages.next_page_number }}'>next</a>
		{% endif %}
		</div>
	    </div>
	
	    <div class='nobreak memberlist'>
	    {% if pages.object_list %}
		{% for mem in pages.object_list %}
		    <div class='nobreak singleMember'>
			<div class='nobreak singleMemberPic'>
			    {{ mem.photo_path|thumbnail }}
			</div>
			<div class='nobreak singleMemberInfo'>
			    <div>
				{{ mem.userid|user_profile }}
			    </div>
			    <div>
				<div>Join Date: {{ mem.join_date }}</div>
			    </div>
			    <div>
				<div id="perm_{{ mem.userid }}">
				    {% if mem.permission == 4 %}
					Owner
				    {% endif %}
				    {% if mem.permission == 3 %}
					Board Member
				    {% endif %}
				    {% if mem.permission == 2 %}
					Assistant Board Member
				    {% endif %}			    
				</div>
			    </div>
			    {% if permission == "Owner" %}
			    <div>
				<div>
				    <b>Change Access Level to:</b>
				</div>
				<div>
				    <select id="{{ mem.userid}}" class="accessUpdateSelect">
					<option value="-1">None</option>
					<option value="1">Regular Member</option>
					<option value="2">Assistant Board Member</option>
					<option value="3">Board Member</option>
					<option value="0">Remove Member</option>
				    </select>
				    <button id="button_{{ mem.userid}}" type="button" value="{{ mem.userid}}" name="Update" class="accessUpdate" style="display:none;">Update</button>
				</div>
			    </div>
			    {% endif %}
			</div>
		    </div>
		{% endfor %}
	    {% else %}
		<div class='nobreak'>No Members Listed</div>
	    {% endif %}
	</div>
    
	<div class='nobreak clearbreak'>
	{% if pages.has_previous %}
	    <a href='?page={{ pages.previous_page_number }}'>previous</a>
	{% endif %}
	<span>Page {{ pages.number }} of {{ pages.paginator.num_pages }}</span>
	{% if pages.has_next %}
	    <a href='?page={{ pages.next_page_number }}'>next</a></div>
	{% endif %}	    
	    
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script src="/{{ media_url }}contifyuser/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">	
	$(document).ready(function(){$("select.accessUpdateSelect").change(function(){
	    // Get Slect id
	    id = $(this).attr("id");
	    // Compose button id
	    buttonid = "#button_" + id;
	    // Show update button
	    if($(this).val() != "-1")
	    {
		$(buttonid).show();
	    }
	    else
	    {
		$(buttonid).toggle();
	    }
	    });
	});
	
	$(document).ready(function(){$("button.accessUpdate").click(function(){
	    var userid = $(this).val();
	    selectid = "#" + userid;
	    var selectedValue = $(selectid).val();
	    
	    if(selectedValue > -1)
	    {
		jQuery.ajax({
		  url: '/connectpeople/{{ group.group_web_address }}/groupMembers/',
		  type: 'POST',
		  data: {'action': 'userAccessUpdate', 'userid': userid, 'selectedValue': selectedValue},
		  dataType: 'json',
		  success: function(json){
		    $(json.permid).html(json.permission);
		},
		  error: function(xhr, ajaxOptions, thrownError){
		    alert("An Error Has Occurred. Please try again.");
		  }
		});
	    }
	});
	});	

    </script>
{% endblock %}
